<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<pageTitle :title="pageTitle" :hasBack="true" ></pageTitle>
			
			<!--详情-->
			<detailCard :data="cardData" icon-class="icon-yunzhuji"></detailCard>
			
			
			<el-tabs  @tab-click="tabClick" type="border-card" style="margin:20px;">
			  <el-tab-pane label="初始化日志">
					<el-button style="z-index:1000;position:absolute;right:20px;top:10px;" type="info" @click="handleReshLOG">
							刷新
					</el-button>
			  	<pageLog 
			  		ref="pageLog"
			  		:options="pageLogOptions"
			  		></pageLog>
			  </el-tab-pane>
			  <el-tab-pane label="实例信息">
			  	
			  	<shiliList ref="shiliList" @command="listCommand"></shiliList>
			  	
			  </el-tab-pane>
			  <el-tab-pane label="监控">
			  	
			  	<jiankong></jiankong>
			  	
			  </el-tab-pane>
			</el-tabs>
			
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
	import {hostStatusFilter} from '@/filters/status/index';
	import pageTitle from "@/view/layout/components/content/pageTitle";
	import detailCard from "@/view/components/card/detailCard";
	import shiliList from "./zhuji/shiliList";
	import jiankong from "./zhuji/jiankong";
	
	import {getHostInfo,getHostStatus} from "@/service/swagger/ResourceHostController";
	import {searchLogInitIdInfoPage} from "@/service/swagger/LogController";
	
	import {listenner} from "@/utils/statuslistener" ;
	import pageLog from "@/view/components/log/pageLog";
	
	export default {
		components : {
			pageTitle,
			pageData:{},
			detailCard,
			shiliList,
			jiankong,
			pageLog,
		},
		data(){
			return {
				// 页面主标题
				pageTitle : "主机详情",
				cardData : null,
				ip : this.$route.query.ip,
				
				cardConifg : {
					"ip" : "IP",
					// "hostName" : "主机名",
					"status" : "状态",
					"message" : "描述信息",
				},
				
				pageLogOptions : {
					autoGetData : true ,
					serviceFN : searchLogInitIdInfoPage ,
					params : {
						id : this.$route.query.id ,
					}
				}
			}
		},
		mounted(){
			this.initPage();
		},
		methods : {
			listCommand(command,row,index){
				if(command&&this[command]){
					this[command](row,index);
				}
			},
			
			initPage(){
				getHostInfo({
					ip : this.ip || "",
				}).then(ret=>{
					this.pageData = ret.data;
					this.initCardData();
					this.addStatusListenner();
//					this.$refs.log.initData({
//						id : ret.data.initId ,
//					});
				})
			},
			initCardData(){
				let data = {};
				for(let i in this.pageData){
					const _name = this.cardConifg[i]
					if(_name){
						if(i=='status'){
							data[_name] = {
								html : hostStatusFilter(this.pageData[i])
							};
						}else{
							data[_name] = this.pageData[i];
						}
					}
				}
				this.cardData = data;
			},
			addStatusListenner(){
				const statusStatic = (status)=>{
					// 是否是稳定状态
					const isStatic =  !(hostStatusFilter(status).indexOf("...")>-1);
					return isStatic ;
				}
				if(!statusStatic(this.pageData.status)){
					listenner({
						api : {
							serviceFN : getHostStatus ,
							params : [
								 this.pageData.id ,
							],
						},
						callBack: (ret)=>{
							
							this.pageData.status = ret.data[0].status;
							
							this.initCardData();
							
							const status = statusStatic(this.pageData.status)
              this.$refs.pageLog.setStatusStatic(status)
              return status;
						},
					},this)
				}
			},
			
			
			refresh(){
				this.refs.shiliList.search();
			},
			
			tabClick(){
				// bug解决 
				// 此bug 因 v-chart 渲染机制导致
				// 用来使 tab 页 中的监控各图表，宽度自动适应
				setTimeout(()=>{
					window.dispatchEvent(new Event("resize"))
				},200)
			},
			//刷新日志
			handleReshLOG(){
					this.$refs.pageLog.initPage()
					this.$refs.pageLog.initData()
			}
		}
	}
</script>

<style>
	
</style>